<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度换肤效果</title>
    <style>
        /* .body {
            background: url('https://img0.baidu.com/it/u=3478627068,331480551&fm=253&fmt=auto&app=120&f=PNG?w=600&h=322') no-repeat center top;
        }
        
        ul {
            list-style: none;
        }
        
        ul li {
            float: left;
        }
        
        img {
            width: 100px;
            height: 100px;
        } */
    </style>
</head>

<body>
    <!-- <div>
        <ul>
            <li> <img src="https://img0.baidu.com/it/u=3478627068,331480551&fm=253&fmt=auto&app=120&f=PNG?w=600&h=322" alt=""> </li>
            <li> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.cnmo.com%2F1877_600x1000%2F1876485.jpg&refer=http%3A%2F%2Fimg.cnmo.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654778160&t=a2332676454ddfd343071c7a3de69111"
                    alt=""> </li>
            <li> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.962.net%2Fup%2F2021-3%2F202131015330007190.jpg&refer=http%3A%2F%2Fpic.962.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654778160&t=98c010391924907d826b034d6b3fc1e7"
                    alt=""> </li>
            <li> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.sccnn.com%2Fbimg%2F338%2F68288.jpg&refer=http%3A%2F%2Fimg.sccnn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654778160&t=6659758d5cefb433c825a8b231b6426c" alt="">                </li>
        </ul>
    </div>
    <script>
        var imgs = document.querySelector('ul').querySelectorAll('img');
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                document.body.style.backgroundImage = ' url(' + this.src + ')';
            }
        }
    </script> -->
    <!-- 表单全选 -->
    <!-- 复选框的checked等于checked时，表示复选框被选中 -->
    <div>
        <table>
            <thead>
                <tr>
                    <th> <input type="checkbox" id="jd"> </th>
                    <th>商品</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody id="j-t">
                <tr>
                    <td> <input type="checkbox"> </td>
                    <td>iphone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td> <input type="checkbox"> </td>
                    <td> iphone10 </td>
                    <td>8900</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var jdAll = document.getElementById('jd');
        var jt = document.getElementById('j-t').getElementsByTagName('input');
        jdAll.onclick = function() { //全选按钮控制所有的复选框
                console.log(this.checked);
                for (var i = 0; i < jt.length; i++) {
                    jt[i].checked = this.checked;
                }
            }
            //复选框来控制全选按钮
        for (var i = 0; i < jt.length; i++) {
            jt[i].onclick = function() {
                var flag = true;
                for (var i = 0; i < jt.length; i++) {
                    if (!jt[i].checked) { //当点击后一定是TRUE，没有点击的是false ！false为TRUE程序执行，如果有false才会走这一条路

                        flag = false;
                        break; //只要有满足条件的后面的可以不在执行，提高代码执行效率，退出for循环
                    }
                }
                jdAll.checked = flag;
            }

        }
    </script>

</body>

</html>